<template>
  <div>
    <div class="background-white">
      <div class="selection-content">
        <div>
          <p style="font-size: 16px; color: #333;">账号设置</p>
          <div class="person-name-head">
            <upload :limit="1" :errorTitle="'只能上传一张头像'" :fileList="fileList"></upload>
            <P>罗国归</P>
          </div>
          <div class="info-form">
            <p class="title">基本信息</p>
            <div class="form">
              <div class="form-term">
                <p>昵称</p>
                <div>
                  <span style="color: #333">罗国归</span>
                  <span @click="editNick" class="edit-color">修改</span>
                </div>
              </div>
              <div class="form-term">
                <p>手机号</p>
                <div>
                  <span style="color: #333">13158094014</span>
                  <span @click="editPhone" class="edit-color">修改</span>
                  <span style="color: #999">仅自己可见</span>
                </div>
              </div>
              <div class="form-term">
                <p>邮箱</p>
                <div>
                  <span style="color: #333">474791480@qq.com</span>
                  <span @click="editEmail" class="edit-color">修改</span>
                  <span style="color: #999">仅自己可见</span>
                </div>
              </div>
              <div class="form-term">
                <p>密码</p>
                <div>
                  <span style="color: #333">已设置</span>
                  <span @click="editPass" class="edit-color">修改</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <!-- 修改昵称-->
      <el-dialog :before-close="handleClose" :close-on-click-modal="essentialInfo.closeModal"
                 :visible.sync="essentialInfo.dialogNick"
                 height="330px"
                 title="修改昵称"
                 width="464px">
        <div class="revise-cell">
          <div class="revise-from">
            <p>新昵称</p>
            <div>
              <el-input
                placeholder="请输入新昵称"
                v-model="essentialInfo.email">
              </el-input>
            </div>
          </div>
        </div>
        <span>
          <el-button @click="essentialInfo.dialogNick = false"
                     style="width: 77px; height: 40px;margin-left: 102px;margin-top: 16px;background: #cc0000;color: #fff"
          >确 定</el-button>
        </span>
      </el-dialog>


      <!--修改手机号码-->
      <el-dialog :before-close="handleClose" :close-on-click-modal="essentialInfo.closeModal"
                 :visible.sync="essentialInfo.dialogVisible"
                 height="330px"
                 title="修改手机号"
                 width="464px">
        <div class="revise-cell">
          <div class="revise-from">
            <p>原手机号</p>
            <div>
              <el-input
                placeholder="请输入原手机号码"
                v-model="essentialInfo.originalPhone">
              </el-input>
            </div>
          </div>
          <div class="revise-from">
            <p>新手机号</p>
            <div>
              <el-input
                placeholder="请输入新手机号码"
                v-model="essentialInfo.newCellPhone">
              </el-input>
            </div>
          </div>
          <div class="revise-from">
            <p>验证码</p>
            <div>
              <el-input
                placeholder="输入验证码"
                style="width: 170px"
                v-model="essentialInfo.verificationCode">
              </el-input>
            </div>
            <el-button style="width: 112px; height: 40px;margin-left: 16px; background: #cc0000;color: #fff">获取验证码
            </el-button>
          </div>
        </div>
        <span>
          <el-button @click="essentialInfo.dialogVisible = false"
                     style="width: 77px; height: 40px;margin-left: 102px;margin-top: 16px;background: #cc0000;color: #fff"
          >确 定</el-button>
        </span>
      </el-dialog>

      <!-- 修改邮箱-->
      <el-dialog :before-close="handleClose" :close-on-click-modal="essentialInfo.closeModal"
                 :visible.sync="essentialInfo.dialogEmail"
                 height="330px"
                 title="修改邮箱"
                 width="464px">
        <div class="revise-cell">
          <div class="revise-from">
            <p>新邮箱</p>
            <div>
              <el-input
                placeholder="请输入新邮箱地址"
                v-model="essentialInfo.email">
              </el-input>
            </div>
          </div>
          <!--          <div class="revise-from">-->
          <!--            <p>验证码</p>-->
          <!--            <div>-->
          <!--              <el-input-->
          <!--                placeholder="输入验证码"-->
          <!--                style="width: 114px"-->
          <!--                v-model="essentialInfo.emailVerificationCode">-->
          <!--              </el-input>-->
          <!--            </div>-->
          <!--            <div class="code">-->
          <!--                <img src="../../assets/img/Refresh.svg">-->
          <!--            </div>-->
          <!--          </div>-->
        </div>
        <span>
          <el-button @click="essentialInfo.dialogEmail = false"
                     style="width: 77px; height: 40px;margin-left: 102px;margin-top: 16px;background: #cc0000;color: #fff"
          >确 定</el-button>
        </span>
      </el-dialog>

      <!-- 修改密码-->
      <el-dialog :before-close="handleClose" :close-on-click-modal="essentialInfo.closeModal"
                 :visible.sync="essentialInfo.dialogPassword"
                 height="330px"
                 title="修改修改密码"
                 width="464px">
        <div class="revise-cell">
          <div class="revise-from">
            <p>原始密码</p>
            <div>
              <el-input
                placeholder="请输入新邮箱地址"
                v-model="essentialInfo.originalPassword">
              </el-input>
            </div>
          </div>
          <div class="revise-from">
            <p>新密码</p>
            <div>
              <el-input
                placeholder="请输入新邮箱地址"
                v-model="essentialInfo.newPassword">
              </el-input>
            </div>
          </div>
          <div class="revise-from">
            <p>确认密码</p>
            <div>
              <el-input
                placeholder="请输入新邮箱地址"
                v-model="essentialInfo.password">
              </el-input>
            </div>
          </div>
        </div>
        <span>
          <el-button @click="essentialInfo.dialogPassword = false"
                     style="width: 77px; height: 40px;margin-left: 102px;margin-top: 16px;background: #cc0000;color: #fff"
          >确 定</el-button>
        </span>
      </el-dialog>
    </div>

  </div>
</template>

<script>
  import upload from "~/components/uploadImg";

  import  head from 'assets/img/head.png'

  export default {
    name: "index",
    layout: 'frame',
    components: {
      upload
    },
    props: {
      aideNavIndex: {
        type: Number,
        default: 1
      }
    },
    data() {
      return {
        head:head,
        fileList:[
          {
            name:'',
            url:head
          }
        ],
        //基本信息
        essentialInfo: {

          dialogNick: false,//修改昵称
          dialogVisible: false, //修改手机号码dialog
          dialogEmail: false, //修改邮箱dialog
          dialogPassword: false, //修改密码dialog
          closeModal: false, //是否点击Mast关闭弹窗

          //修改手机号
          originalPhone: '', //原手机号码
          newCellPhone: '', //新手机号码
          verificationCode: '', //验证码

          //修改邮箱
          email: '', //新邮箱
          emailVerificationCode: '', //验证码

          //修改密码
          originalPassword: '', //原始密码
          newPassword: '',  //新密码
          password: '', //确认密码
        },
      }
    },
    methods: {
      //修改昵称
      editNick() {
        this.essentialInfo.dialogNick = true;
      },
      // 修改手机号
      editPhone() {
        this.essentialInfo.dialogVisible = true
      },

      //修改邮箱
      editEmail() {
        this.essentialInfo.dialogEmail = true;
      },

      //修改密码
      editPass() {
        this.essentialInfo.dialogPassword = true;
      },

      // 关闭弹窗
      handleClose(done) {
        done();
      }
    }
  }

</script>

<style lang="scss">
  .edit-color {
    color: #ff621a;
    cursor: pointer
  }

  .selection-content {
    padding: 16px 31px 30px 31px;

    .person-name-head {
      width: 50%;
      margin-top: 16px;
      margin-bottom: 19px;
      display: flex;
      flex-direction: column;
      align-items: center;

      p {
        font-size: 16px;
        color: #333;
      }
    }

    .info-form {
      .title {
        font-size: 16px;
        color: #333;
        margin-bottom: 28px;
      }

      .form {
        .form-term {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          margin-bottom: 16px;

          p {
            width: 64px;
            height: 40px;
            text-align: right;
            font-size: 16px;
            color: #999;
            margin-right: 31px;
            line-height: 40px;
          }

          div {
            line-height: 40px;

            span {
              font-size: 14px;
            }
          }
        }
      }
    }

    .revise {
      width: 100%;
      height: 80px;
      padding: 16px 20px;
      border-bottom: 1px solid #eee;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
    }
  }

  .revise-cell {
    padding: 0 0 0 32px;

    .revise-from {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 16px;

      p {
        width: 56px;
        height: 40px;
        text-align: right;
        font-size: 14px;
        color: #999;
        margin-right: 16px;
        line-height: 40px;
      }

      div {
        .el-input--small {
          width: 298px;
        }

        .el-input__inner {
          width: 100%;
          height: 40px;
          background: #F4F5F6;
        }

        .el-input--small .el-input__inner:focus {
          background: #fff;
          border: 1px solid #D9DDE1;
        }

        .el-input--small .el-input__inner:hover {
          background: #fff;
          border: 1px solid #D9DDE1;
        }
      }
    }
  }

  .el-input--small .el-input__inner {
    width: 324px;
    height: 40px;
    background: #F4F5F6;
  }

</style>
